<template>
	<view>
		<view class="head">
			<view class="top">
				<view class='cu-avatar round xl margin' @click="handleLogin" v-if="!userInfo.userAvatarUrl">
				</view>
				<view v-else class='cu-avatar round xl margin'
					:style="userInfo?'background-image: url('+userInfo.userAvatarUrl+');':''" >
				</view>
				<text class="text-lg text-bold text-xl">{{userInfo.userName?userInfo.userName:"请登录"}}</text>
			</view>
			<view class="bottom"></view>
		</view>
		<view class="grid justify-center">
			<view class="cu-list grid col-5">
				<view class="cu-item" v-for="(item,index) in cuIconList" :key="index">
					<view class="cuIcon-cardboardfill text-grey">
						<view class="cu-tag badge" v-if="item.badge!=0">
							{{item.badge}}
						</view>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>

		</view>

		<view class="cu-list menu sm-border card-menu margin-top-sm">
			<!-- 图标 + 标题、arrow 带箭头 -->
			<view class="cu-item arrow" @click="handleAddress">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">收货地址</text>
				</view>
			</view>
		</view>
		<view class="cu-list menu sm-border card-menu margin-top-sm">
			<!-- 图标 + 标题、arrow 带箭头 -->
			<view class="cu-item arrow" @click="handleAddress">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">购物车</text>
				</view>
			</view>
		</view>
		<view class="cu-list menu sm-border card-menu margin-top-sm">
			<!-- 图标 + 标题、arrow 带箭头 -->
			<view class="cu-item arrow" @click="handleAddress">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">我的订单</text>
				</view>
			</view>
		</view>
		<view class="cu-list menu sm-border card-menu margin-top-sm" v-if="userInfo.userName">
			<!-- 图标 + 标题、arrow 带箭头 -->
			<view class="cu-item arrow" @click="handleLogout">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">退出登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {

		data() {
			return {
				skin: false,
				cuIconList: [{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}, {
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}, {
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}, {
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}, {
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
				}],
			};
		},
		computed: {
			...mapState([
				"userInfo"
			])
		},
		methods: {
			...mapActions(["userLogout"]),
			SwitchSex(e) {
				this.skin = e.detail.value
			},
			handleAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			handleLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			handleLogout() {
				uni.showModal({
					title: '是否退出登录',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.userLogout()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		onShow() {

		}
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 100%;
		height: 25vh;
		background-color: yellow;

		.cu-avatar {
			background-image: url(/static/iconImage/mine.png);
		}

	}

	.grid {
		width: 100%;

		.cu-list {
			width: 90%;
			margin-top: -60rpx;
			border-radius: 10px;
		}

	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}
</style>